<template>
	<view>
		
		<view>setup 语法糖</view>
		<view @click="copyn+=1">copyn：{{copyn}}</view>
		<view class="title">watch监听</view>
		<button size="mini" @click="stop()">停止监听</button>
		<view>运费fee:{{fee}}</view> 
		<button size="mini" @click="fee=fee+5">设置</button>
		<view>计算结果dn:{{dn}}</view>
		<button @click="n++">{{n}}</button>
		<!-- 单击确认 -->
		<input 
		@confirm="addList"
		v-model="temp"
		placeholder="添加计划"/>
		<view>
			<view v-for="(item,index) in list" :key="item">
			{{item}}
				<button size="mini" @click="list.splice(index,1)">x</button>
			</view>
		</view>
	</view>
</template>
<script setup>
	// ref 定义响应是值类型方法
	// reactive 引用类型
	// computed 从现有数据计算新的数据
	// watch监听数据的变化
	// watchEffect监听副作用（只要被这个方法引用的数据，发送变化都会触发）
	// readyonly只读常用与优化
	import {ref,reactive,computed,watch,watchEffect,readonly} from 'vue'
	// 定义响应式数据n 默认值是8
	const n = ref(8);
	const copyn = readonly(n);
	const list = reactive(uni.getStorageSync("list")||[])
	// 定义临时数据
	const temp = ref('');
	const addList = (e)=>{
		console.log(e)
		// 在list添加一个元素为当前事件input的值
		list.unshift(e.detail.value)
		temp.value = '';
		 
	}
	//计算computed
	const dn = computed(()=>n.value*2)
	//计算fee
	const fee = computed({
		get(){  //获取fee的时候执行get
			if(n.value==1){return 7}
			else{
				var total = n.value*5+2;
				return total;
			}
		},
		set(v){//设置fee的时候执行 set方法
			n.value = Math.floor((v-2)/5)
		}
	})
	// 当list变化时候存储list
	// 当组件创建完毕获取list
	const stop = watch(list,(val,oldVal)=>{
		// uni.setStorageSync("list",list)
	})
	// 无论是n还是list变化都需要存储n与list
	watchEffect(()=>{
		uni.setStorageSync("list",list);
		uni.setStorageSync("n",n.value)
	},{deep:true})
</script>